<!--
//
// Trigger.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/11.
//
-->
<template>
    <div class="Files">
        <!-- 内容 -->
        <div class="container">
            <!-- 功能按钮 -->
<!--            <div class="table-buttons">-->
<!--                <el-button v-permission="permission.add" type="primary" @click="addData">-->
<!--                    <b-icon name="bi-plus" size="20" />-->
<!--                    上传文件-->
<!--                </el-button>-->
<!--            </div>-->
            <!--checkbox设置 :checkbox-config="{trigger: 'row', highlight: true}" -->
            <!--radio设置 :radio-config="{trigger: 'row', highlight: true}" -->
            <vxe-table ref="VXETable" style="width: 100%" :column-config="{ resizable: false}" :data="state.list" :height="tableHeight" :loading="state.isLoading" :radio-config="{trigger: 'row', highlight: true}" :row-config="{isCurrent: true, isHover: true, keyField: 'id'}" :tree-config="{childrenField: 'children', reserve: true}" border round show-overflow size="small" @current-change="() => {}" @radio-change="() => {}">
                <template #empty>
                    <el-empty :image-size="100" />
                </template>
                <vxe-column fixed="left" title="#" type="seq" width="50" />
                <vxe-column field="fileName" title="文件名称" width="260"></vxe-column>
                <vxe-column align="center" field="fileType" title="文件类型" width="80"></vxe-column>
                <vxe-column align="center" field="fileSize" title="文件大小" width="120">
                    <template #default="{row}">
                        {{$format.fileSize(row.fileSize)}}
                    </template>
                </vxe-column>

                <vxe-column align="center" field="fileBitness" title="编译版本" width="100">
                    <template #default="{row}">
                        <span v-if="row.fileBitness === 32">32位</span>
                        <span v-if="row.fileBitness === 64">64位</span>
                        <span v-if="row.fileBitness === 96">32位 | 64位</span>
                        <span v-if="row.fileBitness === -1">未知</span>
                    </template>
                </vxe-column>
                <vxe-column field="fileVersion" title="文件版本号" width="190">
                    <template #default="{row}">
                        <span style="color: var(--el-color-primary);">V{{ row.fileVersionNum?.replace(/v/,"") }}</span>
                    </template>
                </vxe-column>
                <vxe-column field="localPath" min-width="200" title="本地文件路径"></vxe-column>
                <vxe-column :resizable="false" field="action" fixed="right" title="操作" :width="$widthColumn(80)">
                    <template #default="{row}">
                        <table-action :actions="[
                            {title: '删除', permission: permission.delete, type: 'danger', ok: deleteData, confirm: '您确定要删除当前数据么?'},
                        ]" :data="row" />
                    </template>
                </vxe-column>
            </vxe-table>
        </div>
    </div>
    <EditForm ref="editForm" />
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import * as api from "./api.js"
import EditForm from "./EditForm.vue"

const {$message, $format, $widthColumn} = window;

const props = defineProps({});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();
const tableHeight = computed(() => store.getters.layoutType === "mobile" ? "" : store.getters.containerHeight - 220)

// 响应式数据
const state = reactive({
    // 表格数据加载中
    isLoading: false,
    // 表格数据
    list: []
})

// 当前页面功能权限
const permission = {
    add: "VersionFile:AddProgramVersionFile",
    delete: "VersionFile:DeleteVersionFileInfo",
};

// 请求body参数
const requestBody = reactive({
    // name: null,
})
// 筛选区域配置
const requestBodyConfig = reactive({
    // name: {label: "名称", component: "el-input"},
    // code: {label: "编号", component: "el-input", inMore: true},
    //sort: {label: "排序", component: "el-select", data: [{name: "1", value: 1}, {name: "2", value: 2}], inMore: true},
    //createdTime: {label: "创建时间", component: "el-date-picker", format: "YYYY-MM-DD", inMore: true},
    //updateTime: {label: "更新时间", component: "el-date-picker-datetime", format: "YYYY-MM-DD HH:mm:ss", inMore: true}
})
// 分页配置
const pageConfig = reactive({
    total: 0,
    sizes: [10, 20, 50, 100, 200]
})


const editForm = ref();

// 添加
function addData() {
    if (!state.version) return $message.warning("暂无版本信息")
    editForm.value.show({
        title: "添加",
        options: {
            versionId: state.version.id,
            programId: state.version.programId,
        },
        ok: () => {
            loadList()
        }
    })
}

// 删除
async function deleteData({id}) {
    console.danger("删除: ", id)
    const {success, data} = await api.DeleteVersionFileInfo({id});
    if (!success) return 0;
    loadList();
    $message.success("删除成功")
}


// 查询列表
async function loadList() {
    const body = {
        versionId: state.version.id,
        programId: state.version.programId,
    };
    state.isLoading = true;
    const {success, data} = await api.GetVersionFileList(body);
    state.isLoading = false;
    if (!success) return 0;
    state.list = data || [];
}


// 刷新
function reload(version) {
    state.version = version;
    if (version) {
        loadList()
    } else {
        state.list = [];
    }

}

onMounted(() => {
})
defineExpose({reload})
</script>

<style lang="scss" scoped>
.Files {
    padding-left: 10px;
    width: 100%;
    box-sizing: border-box;

    .container {
        width: 100%;
    }
}
</style>
